{% extends "pages-base.html" %}
{% block css %}
{% endblock %}
{% load userInfo %}
{% block content %}
<div class="panel-heading">
    <h3 class="panel-title">用户</h3>
</div>
<!--user list-->
<!--=====================================-->
<div class="row">
    <div class="col-lg-12">
        <div class="panel-body">
            <div class="pad-btm form-inline">
                <div class="row">
                    <div class="col-sm-6 table-toolbar-left">
                        <button id="adduser-add-user-btn" class="btn btn-purple" data-toggle="modal"
                                data-target="#pages-users-adduser-Modal"><i class="demo-pli-add"></i> 添加
                        </button>
                        <button id="adduser-del-user-btn" class="btn btn-danger" data-toggle="modal"
                                data-target="#pages-users-deluser-Modal"><i class="demo-pli-remove"></i> 删除
                        </button>
                        <button id="adduser-selectall-user-btn" class="btn btn-primary"><i class="demo-pli-add"></i> 全选</button>
                        <button id="adduser-cancel-user-btn" class="btn btn-success"><i class="demo-pli-remove"></i> 取消</button>
                        <button id="adduser-enter-edit" class="btn btn-mint btn-rounded"> 进入编辑模式</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!--=====================================-->

<!--user list table-->
<!--=====================================-->
<div class="panel-body">
    <div class="pad-btm form-inline">
        <div class="row">
            <div class="col-sm-6"></div>

            <div class="col-sm-6 table-toolbar-right">
                <div class="form-group">
                    <input id="demo-input-search2" type="text" placeholder="Search" class="form-control"
                           autocomplete="off">
                </div>

            </div>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
            <tr>
                <th>选择</th>
                <th>序号</th>
                <th>用户名</th>
                <th>姓名</th>
                <th>邮箱</th>
                <th>所属组</th>
                <th>用户类型</th>
                <th>到期时间</th>
                <th>是否启用</th>
            </tr>
            </thead>
            <tbody class="pages-user-table-list">
            {% for user in allUser %}
            <tr userID="{{ user.uid }}">
                <td><input type="checkbox" class="pages-users-selected"></td>
                <td>{{ forloop.counter }}</td>
                <td>{{ user.userName }}</td>
                <td>{{ user.userNameHuman }}</td>

                <td>{{ user.userEmail }}</td>

                <td>{{ user.usergroup.userGroupName }}</td>
                <td>{{ user.userType|userType }}</td>
                <td><i class="demo-pli-clock"></i>{{ user.userValidity }}</td>
                {% if user.userIsActive == 0 %}
                <td userIsActive="0">
                    <div  class="label label-table label-success userIsActive" style="cursor: pointer">是</div>
                </td>
                {% elif user.userIsActive == 1 %}
                <td userIsActive="1">
                    <div class="label label-table label-danger userIsActive" style="cursor: pointer">否</div>
                </td>
                {% endif %}

            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<!--End Data Table-->
<!--=====================================-->


<!--add  user modal box-->
<!--===================================================-->
<div class="row">
    <div class="col-lg-4"></div>
    <div class="col-lg-4">
        <!-- Modal -->
        <div class="modal fade" id="pages-users-adduser-Modal" tabindex="-1" role="dialog"
             aria-labelledby="pages-users-adduser-ModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <!--      <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                          </div>-->
                    <div class="modal-body">
                        <div class="panel">
                            <div class="panel-heading">
                                <h3 class="panel-title">创建用户</h3>
                            </div>

                            <!-- BASIC FORM ELEMENTS -->
                            <!--===================================================-->
                            <form class="panel-body form-horizontal form-padding">

                                <!--username Input-->
                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="adduser-input-username">用户名</label>
                                    <div class="col-md-9">
                                        <input type="text" id="adduser-input-username" class="form-control"
                                               placeholder="Username">
                                        <!--<small class="help-block">请输入用户名</small>-->
                                    </div>
                                </div>
                                <!--name Input-->
                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="adduser-input-name">姓名</label>
                                    <div class="col-md-9">
                                        <input type="text" id="adduser-input-name" class="form-control"
                                               placeholder="name">
                                        <!--<small class="help-block">请输入用户名</small>-->
                                    </div>
                                </div>
                                <!--Password-->
                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="adduser-password-input">密码</label>
                                    <div class="col-md-9">
                                        <input type="password" id="adduser-password-input" class="form-control"
                                               placeholder="Password">
                                        <small class="help-block">Please enter password</small>
                                    </div>
                                </div>
                                <!--Email Input-->
                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="adduser-input-email">邮箱</label>
                                    <div class="col-md-9">
                                        <input type="email" id="adduser-input-email" class="form-control"
                                               placeholder="Email">
                                        <small class="help-block">Please enter your email</small>
                                    </div>
                                </div>

                                <!--groups-->
                                <div class="form-group">
                                    <label class="col-md-3 control-label">所属组</label>
                                    <div class="col-md-9">
                                        <select name="adduser-groups-input" id="adduser-groups-input"
                                                class="form-control">
                                            <option value=""></option>
                                            {% for g in allGroups %}
                                            <option value="{{g.gid}}">{{ g.userGroupName }}</option>
                                            {% endfor %}
                                        </select>

                                    </div>
                                </div>

                                <div class="form-group pad-ver">
                                    <label class="col-md-3 control-label">用户类型</label>
                                    <div class="col-md-9">
                                        <div class="radio" id="pages-users-usertype">

                                            <!-- Inline radio buttons -->
                                            <input id="adduser-usertype-general" class="magic-radio" type="radio"
                                                   name="adduser-usertype"
                                                   checked value="0">
                                            <label for="adduser-usertype-general">普通用户</label>

                                            <input id="adduser-usertype-admin" class="magic-radio" type="radio"
                                                   name="adduser-usertype" value="1">
                                            <label for="adduser-usertype-admin">管理员</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group pad-ver">
                                    <label class="col-md-3 control-label">是否激活</label>
                                    <div class="col-md-9">
                                        <div class="radio" id="pages-users-isactive">

                                            <!-- Inline radio buttons -->
                                            <input id="adduser-active-is" class="magic-radio" type="radio"
                                                   name="adduser-active"
                                                   checked value="0">
                                            <label for="adduser-active-is">已激活</label>

                                            <input id="adduser-active-not" class="magic-radio" type="radio"
                                                   name="adduser-active" value="1">
                                            <label for="adduser-active-not">未激活</label>
                                        </div>
                                    </div>
                                </div>
                                <!--user expiry data-->
                                <div class="form-group pad-ver">
                                    <label class="col-md-3 control-label">有效期</label>
                                    <div class="col-md-9">
                                        <div class="radio" id="pages-users-expirydata">
                                            <!-- Inline radio buttons -->
                                            <input id="adduser-expriy-data-forever" class="magic-radio" type="radio"
                                                   name="adduser-expiry-data"
                                                   checked value="99999">
                                            <label for="adduser-expriy-data-forever">永久有效</label>

                                            <input id="adduser-expriy-data-seven" class="magic-radio" type="radio"
                                                   name="adduser-expiry-data" value="7">
                                            <label for="adduser-expriy-data-seven">7天</label>

                                            <input id="adduser-expriy-data-thirty" class="magic-radio" type="radio"
                                                   name="adduser-expiry-data" value="30">
                                            <label for="adduser-expriy-data-thirty">30天</label>

                                        </div>
                                    </div>
                                </div>
                                <div class="panel-footer">
                                    <div class="row">
                                        <div class="col-sm-9 col-sm-offset-3" id="pages-users-adduser-btn">
                                            <button class="btn btn-mint" type="button">提交</button>
                                            <button class="btn btn-warning" type="button" data-dismiss="modal">取消
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>
    <div class="col-lg-4"></div>
</div>

<!--===================================================-->
{% endblock %}


{% block js %}
<script src="/static/js/pages-users-service.js"></script>
{% endblock %}